<script setup>
import CourseDirectory from "@/components/backend/CourseDirectory.vue";
import ChapterForm from "@/components/backend/ChapterForm.vue";
import SectionForm from "@/components/backend/SectionForm.vue";
import {ref} from "vue";

const activeFrom = ref('');
const selectedCourseId = ref(null);
const selectedChapterId = ref(null);

const handleAddChapter = (courseId) => {
  activeFrom.value = 'chapter';
  selectedCourseId.value = courseId;
};

const handleAddSection = (chapterId) => {
  activeFrom.value = 'section';
  selectedChapterId.value = chapterId;
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-container>
        <el-aside width="350px">
          <CourseDirectory
            @add-chapter="handleAddChapter"
            @add-section="handleAddSection"
          />
        </el-aside>
        <el-main>
          <ChapterForm
            v-if="activeFrom === 'chapter'"
            :course-id="selectedCourseId"
            @submit-success="activeFrom = ''"
          />
          <SectionForm
            v-if="activeFrom === 'section'"
            :chapter-id="selectedChapterId"
            @submit-success="activeFrom = ''"
          />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
el-aside {
  height: 100vh;
}
</style>
